{{- $self := . -}}
{{- $page_scratch := .page_scratch -}}
{{- if .Params.search -}}
  {{- .page_scratch.Add "js" (dict "file" "syna-search.js") -}}
{{- end -}}
{{- $bg := .self.Scratch.Get "bg" }}

{{- "<!-- Navigation -->" | safeHTML -}}
<nav class="overlay fragment navbar navbar-expand-lg py-2 scroll-spy
  {{- printf " bg-%s" $bg -}}
  {{- if or (eq $bg "light") (eq $bg "white") (eq $bg "secondary") -}}
    {{- printf " navbar-%s" "light" -}}
  {{- else -}}
    {{- printf " navbar-%s" "dark" -}}
  {{- end -}}
" id="{{ .Name }}" role="navigation"
{{- if .Params.sticky -}}
  {{- safeHTMLAttr (print " style='position: sticky; top: 0; z-index: 10000 !important;'") -}}
{{- end -}}>
  <div class="container">
    {{- if .Params.asset.image }}
      <a class="navbar-brand py-0" href="{{ "#" | relLangURL }}">
        <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .Params.asset) }}" height="35" class="d-inline-block align-top" alt="{{ .Params.asset.text }}">
      </a>
    {{- else }}
      <a class="navbar-brand py-0" href="{{ "#" | relLangURL }}">
        {{- .Params.asset.text -}}
      </a>
    {{- end }}
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse
      {{- if .Params.search -}}
        {{- printf " justify-content-between " -}}
      {{- else -}}
        {{- printf " justify-content-end " -}}
      {{- end -}} collapse show" id="navbarCollapse">
      <ul class="navbar-nav">
        {{- if .Params.prepend -}}
          {{- range sort .Params.prepend }}
            {{- $isMenuCurrent := or (eq $.root.Permalink .url) (eq (printf "%s/" $.root.Permalink) .url) (eq $.root.Permalink (printf "%s/" .url)) -}}
            <li class="nav-item">
              <a href="{{ .url | relLangURL }}"
                {{- if hasPrefix .URL "#" }}
                  class="nav-link anchor"
                {{- else }}
                  class="nav-link {{- if $isMenuCurrent }} active default-active {{- end -}}"
                {{- end }}>
                {{ .name }}
              </a>
            </li>
          {{- end -}}
        {{- end }}
        {{- if .Site.Menus.main -}}
          {{- range sort .Site.Menus.main }}
            {{- $isMenuCurrent := or ($.root.HasMenuCurrent "main" .) (eq $.root.Permalink .URL) (eq (printf "%s/" $.root.Permalink) .URL) (eq $.root.Permalink (printf "%s/" .URL)) -}}
            <li class="nav-item {{ if .HasChildren }}dropdown{{ end }}">
              <a
                {{- if hasPrefix .URL "#" }}
                  class="nav-link anchor"
                {{- else }}
                  class="nav-link {{- if $isMenuCurrent }} active default-active {{- end -}} {{ if .HasChildren }} dropdown-toggle{{ end }}"
                {{- end }}
                {{if .HasChildren}}
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  href="#"
                {{ else }}
                  href="{{ .URL | relLangURL }}"
                {{ end }}>
                {{ .Name }}
              </a>
              {{ if .HasChildren }}
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                {{ range .Children }}
                  <a class="dropdown-item {{ if $.root.IsMenuCurrent "main" . }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
                {{ end }}
              </div>
              {{ end }}
            </li>
          {{- end -}}
        {{- end }}
        {{- if .Params.postpend -}}
          {{- range sort .Params.postpend }}
            {{- $isMenuCurrent := or (eq $.root.Permalink .url) (eq (printf "%s/" $.root.Permalink) .url) (eq $.root.Permalink (printf "%s/" .url)) -}}
            <li class="nav-item">
              <a href="{{ .url | relLangURL }}"
                {{- if hasPrefix .URL "#" }}
                  class="nav-link anchor"
                {{- else }}
                  class="nav-link {{- if $isMenuCurrent }} active default-active {{- end -}}"
                {{- end }}>
                {{ .name }}
              </a>
            </li>
          {{- end -}}
        {{- end }}
      </ul>
      {{- if .Params.search }}
        <div class="search-container position-relative">
          <form action="{{ "search" | absURL }}" class="my-0">
            <div class="input-group my-0">
              <input type="text" class="form-control py-1" id="search-query-{{ .Name }}" name="s" placeholder="{{- i18n "navbar.search" | default "Search..." -}}">
              <div class="input-group-append">
                <button class="btn btn-primary" title="{{- i18n "search.search" | default "Search" -}}"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </form>
          <div class="search-results-container">
            <div class="col p-0">
              <div id="search-results-{{ .Name }}" class="col px-0 results"></div>
            </div>
          </div>
        </div>
      {{- end }}
      {{- if .Site.IsMultiLingual -}}
        {{- range .Site.Languages }}
          <a class="btn btn-secondary p-1 m-1" href="{{ delimit (slice "/" .) "" }}" role="button">
            {{ . }}
          </a>
        {{- end -}}
      {{- end }}
    </div>
  </div>
  {{- with .Params.repo_button }}
    <div class="d-none d-lg-block pl-auto">
      <a class="btn btn-light ignore-color-change" href="{{ .url }}" role="button" title="{{- i18n "navbar.github" | default "Github" -}}">
        <i class="{{ printf "%s" .icon | default (printf "fab fa-github") }} mr-2"></i>
        {{ .text | default (i18n "github.star") }}
      </a>
    </div>
  {{- end }}
</nav>
{{/*
  * Get the config of breadcrumbs and set defaults
  */}}
{{- $breadcrumb := .Params.breadcrumb | default (dict "display" false) -}}
{{- $sections := $page_scratch.Get "sections" -}}
{{- $level := cond (isset $breadcrumb "level") $breadcrumb.level 1 -}}
{{- $display_breadcrumb := $breadcrumb.display -}}
{{- $nav_bg := $breadcrumb.background | default "light" -}}
{{/*
  * Generate the crumbs, the loop behaves like the fragment_directories loop in
  * fragments helper
  */}}
{{- $page_scratch.Set "crumbs" slice -}}
{{- range $index, $section := $sections -}}
  {{- $directory := $section -}}
  {{- $page_scratch.Set "crumb_tmp" false -}}
  {{- $isCurrentPage := eq (add $index 1) (len $sections) -}}
  {{- if and $isCurrentPage (eq $.root.Kind "page") -}}
    {{- $page_scratch.Set "crumb_tmp" $.page -}}
  {{- else if ge $index 1 -}}
    {{- $directory := (delimit (first (add $index 1) $sections) "/") -}}
    {{- $page_scratch.Set "crumb_tmp" ($.root.Site.GetPage "page" (print (strings.TrimPrefix "/" $directory))) -}}
  {{- else -}}
    {{- $page_scratch.Set "crumb_tmp" ($.root.Site.GetPage "section" (print (strings.TrimPrefix "/" $directory))) -}}
  {{- end -}}
  {{- if ($page_scratch.Get "crumb_tmp") -}}
    {{- $page_scratch.Add "crumbs" ($page_scratch.Get "crumb_tmp") -}}
  {{- end -}}
{{- end -}}
{{/*
  * Render the breadcrumb
  */}}
{{- if and $display_breadcrumb (lt $level (len ($page_scratch.Get "crumbs"))) }}
  <nav aria-label="breadcrumb" class="overlay navbar breadcrumb-container navbar-expand-lg pt-2
    {{- printf " bg-%s" $nav_bg -}}
    {{- if or (eq $bg "light") (eq $bg "white") (eq $bg "secondary") -}}
      {{- printf " navbar-%s" "light" -}}
    {{- else -}}
      {{- printf " navbar-%s" "dark" -}}
    {{- end -}}
  " id="{{ .Name }}-breadcrumb">
    <div class="container">
      <ol class="breadcrumb mb-0 py-1">
        {{- $item_count := sub (len ($page_scratch.Get "crumbs")) $level -}}
        {{- if gt $item_count 0 -}}
          {{- range last $item_count ($page_scratch.Get "crumbs") -}}
            <li class="breadcrumb-item active"
              {{- if ne $.root . -}}
                {{- print " aria-current=\"page\"" -}}
              {{- end -}}>
              {{- if ne $.root . }}
                <a href="{{ .Permalink -}}">
                  {{- .Title -}}
                </a>
              {{- else }}
                {{- .Title -}}
              {{- end }}
            </li>
          {{- end -}}
        {{- end -}}
      </ol>
    </div>
  </nav>
{{- end }}
<div class="scroll-to-top bg-primary
  {{- if not .Site.Params.fontawesome.disabled -}}
    {{ print " has-font-icon" }}
  {{- end -}}"
  title="{{- i18n "navbar.back_to_top" | default "Back to top" -}}"
  >
  {{- if not .Site.Params.fontawesome.disabled -}}
    <i class="fas fa-angle-up"></i>
  {{- else -}}
    Top
  {{- end -}}
  <span class="sr-only">{{ i18n "navbar.back_to_top" | default "Back to top" }}</span>
</div>
{{- if .Params.search }}
{{ partial "helpers/search-result-template.html" (dict "self" $self "name" .Name "message_class" "p-2" "background" $bg) }}
<script>
  (function() {
    var fragmentName = "{{ .Name }}";
    window.syna.api.register('search', 'search-' + fragmentName, {
      searchInput: `#search-query-${fragmentName}`,
      resultsContainer: `#search-results-${fragmentName}`,
      template: `#search-result-template-${fragmentName}`,
      noResults: `#search-no-results-template-${fragmentName}`,
      empty: `#search-empty-template-${fragmentName}`,
    });

    var resultsContainer = document.querySelector(`#${fragmentName} .search-results-container`)
    document.querySelector(`#search-query-${fragmentName}`).addEventListener('input', function(e) {
      if (e.target.value.length) {
        resultsContainer.classList.add('show');
      } else {
        resultsContainer.classList.remove('show');
      }
    });

    document.addEventListener('click', function(e) {
      if (!document.querySelector(`#${fragmentName} .search-container`).contains(e.target)) {
        document.querySelector(`#search-query-${fragmentName}`).value = '';
        resultsContainer.classList.remove('show');
      }
    });
  })();
</script>
{{- end -}}
{{- if .Params.sticky }}
<style>
  :root {
    --header-height: 56px;
  }
</style>
{{- end -}}
